<template>
  <div>
    <el-form-item :style="{'width':formItem.width + 'px'}">
      <template #label><formDesignLabel :formItem="formItem" :isManual="true" /></template>
      <formDesignDescription :formItem="formItem"/>
      <el-input class="double-model-input-writer"
        :style="{
          'height': formItem.height + 'px'
        }" 
        :placeholder="`${filterWriterPlaceholder(formItem.writerPlaceholderType)}（${filterFormat(formItem.format)}${filterRepeatedSubmit(formItem.repeatedSubmit)}）`" 
        disabled 
        v-model="formItem.modelValue"
      ></el-input>
      <div v-if="formDesign.publishSetting.typeId == 4 || curBankType == 1" class="exam-setting">
        <qsAnswer :formItem="formItem" :isAnswerSet="false" />
      </div>
    </el-form-item>
  </div>
</template>
<script setup>
import { defineProps, computed } from 'vue'
import { designOptions } from "@/views/form/manage/design/config/formCmpConfig.js";
import formDesignLabel from "@/views/form/manage/design/components/formDesignLabel.vue";
import formDesignDescription from "@/views/form/manage/design/components/formDesignDescription.vue";
import qsAnswer from "@/views/form/manage/design/components/qsAnswer.vue";
import { useStore } from 'vuex'

//题库分组
const curBankType = computed(()=>{return store.state.formDesignInfo.curBankType})
const props = defineProps({
  formItem: {
    type: Object,
  },
})
const store = useStore()
const formDesign = computed(()=>{return store.getters.formDesignInfo})
const formItem = computed(()=>{return props.formItem})
const filterWriterPlaceholder = (value) => {
  if(value == 0) return '填写者回答区'
  else{
    return formItem.value.writerPlaceholder
  }
}
const filterFormat = (value) => {
  if(value == 0) return ''
  else{
    let strFormat = designOptions.formatOptions.find(item => item.value == value).label
    if(value == 1){ //数字
      return strFormat + ','
    }else if(value == 4){ //汉字
      return  strFormat + '，' + filterWordsNumFormat(formItem.value.wordsNumFormat)
    }else{
      return strFormat
    }
  } 
}
const filterWordsNumFormat = (value) => {
  if(value == 0) return ''
  else{
    let str = designOptions.wordsNumFormatOptions.find(item => item.value == value).label
    if(value == 4){ //介于
      return `字数限制${str}${formItem.value.wordsNumRange[0]}至${formItem.value.wordsNumRange[1]}，`
    }else{
      return `字数限制${str}${formItem.value.wordsNum}，`
    }
  }
}
const filterRepeatedSubmit = (value) => {
  let str = designOptions.repeatedSubmitOptions.find(item => item.value == value).label
  return `${str}重复提交`
}
</script>

<style scoped lang='scss'>
.exam-setting{
  margin-top: 5px;
  width: 100%;
}
</style>